<template>
    <div class="post">
        <Layout>
            <Content>
                <Row type="flex" justify="space-between" style="margin-bottom: 15px; padding: 0 20px">
                    <Col span="4">
                        <h3 v-if="articleId">更新文章</h3>
                        <h3 v-else>新文章</h3>
                    </Col>
                    <Col span="4" style="text-align: right"> <Button type="primary" @click="publish">发布</Button></Col>
                </Row>
                <Row>
                    <Input v-model="post.title" placeholder="请输入文章名称" style="width: 100%" />
                </Row>
                <Row>
                    <mavon-editor ref="md" v-model="post.originContent" @imgAdd="imgAdd"  style="height: 70vh; width: 100%"></mavon-editor>
                </Row>
            </Content>
        </Layout>
        <Modal v-model="publishShow" transfer mask :zIndex="10000">
            <p slot="header" style="text-align:left">
                <span>文章设置</span>
            </p>
            <div style="text-align:left">
                <Form :model="post" :label-width="80" :rules="ruleValidate">
                    <FormItem label="文章标题">
                        <Input v-model="post.title" placeholder="请输入文章标题"></Input>
                    </FormItem>
                    <FormItem label="分类" require prop="catId">
                        <Select v-model="post.catId">
                            <Option :value="category.id" v-for="category in categoryList" :key="category.id">{{ category.catName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="标签" require prop="tagId">
                        <Select v-model="post.tagId" filterable multiple allow-create @on-create="tagCreate">
                            <Option :value="tag.id" v-for="tag in tagList" :key="tag.id">{{ tag.tagName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="摘要" prop="summary">
                        <Input v-model="post.summary" placeholder="请输入摘要，如果不录入则自动获取" type="textarea"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" @click="publishArticle(1)">发布</Button>
                <Button type="warning" style="margin-left: 8px" @click="publishArticle(0)">草稿</Button>
                <Button style="margin-left: 8px" @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'post',
    data() {
        return {
            // 文章id
            articleId: '',
            // 发布弹出层
            publishShow: false,
            // 文章信息
            post: {
                // 分类Id
                catId: '',
                // 文章标题
                title: '',
                // 原始内容
                originContent: '',
                // 摘要
                summary: '',
                // 标签
                tagId: '',
            },
            // 分类数据源
            categoryList: [],
            // 标签数据源
            tagList: [],
            // 页码
            current: 1,
            // 页长
            size: 10,
            // 总数
            total: 0,
            // 表单验证规则
            ruleValidate: {
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' },
                ],
                catId: [
                    { required: true, message: '分类不能为空', trigger: 'blur' },
                ],
                tagId: [
                    { required: true, message: '标签不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        publish() {
            this.publishShow = true
        },
        // 上传图片方法
        async imgAdd(pos, $file) {
            let res = await this.$api.upload($file)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            const data = res.data
            let url = process.env.VUE_APP_PORT + data.url
            this.$refs.md.$img2Url(pos, url)
        },
        // 创建标签
        async tagCreate(query) {
            const param = {
                tagName: query,
                color: '#2d8cf0',
            }
            const res = await this.$api.tag(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$nextTick(async () => {
                await this.tagData()
                let tag = this.post.tag
                tag.pop()
                tag.push(res.data.id)
                this.post.tag = tag
            })
        },
        // 加载数据源
        async dataSource() {
            await this.categoryData()
            await this.tagData()
        },
        // 分类数据源
        async categoryData() {
            const res = await this.$api.categoryList()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.categoryList = res.data
        },
        // 标签数据源
        async tagData() {
            const res = await this.$api.tagList()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.tagList = res.data
        },
        // 发布文章
        async publishArticle(articleStatus) {
            const param = {
                ...this.post,
                articleStatus,
                originContent: this.$refs.md.d_value,
                convertContent: this.$refs.md.d_render,
                tagId: this.post.tagId.join(','),
            }
            if (!param.summary) {
                param.summary = this.post.originContent ? this.post.originContent.substring(0, 100) : ''
            }
            const res = await this.$api.article(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$Message.success('操作成功!')
            this.publishShow = false
            setTimeout(() => {
                this.$router.push({ name: 'article' })
            }, 1000)
        },
        // 取消
        cancel() {
            this.publishShow = false
        },
        // 数据清空
        clear() {
            this.post = {
                // 分类Id
                catId: '',
                // 文章标题
                title: '',
                // 原始内容
                originContent: '',
                // 摘要
                summary: '',
                // 标签
                tagId: '',
            }
        },
        async articleDetail(articleId) {
            const res = await this.$api.articleDetail(articleId)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.post = res.data
            this.post.tagId = res.data.tagIds
        },
        init(articleId) {
            this.dataSource()
            // 如果存在文章Id则需要获取文章详情
            if (articleId) {
                this.articleId = articleId
                this.articleDetail(articleId)
            } else {
                this.clear()
            }
        },
    },
    activated() {
        const articleId = this.$route.query.articleId
        this.init(articleId)
    },
    mounted() {
        const articleId = this.$route.query.articleId
        this.init(articleId)
    },
}
</script>

<style scoped>
    .ivu-row{
        margin-bottom: 15px;
    }
</style>
